<template>
  <div>
    <header class="my-new-header clearfix"  v-on:mouseover="changeActive($event)">
      <p class="pull-left my-new-logo flex all-cen">
        <img src="@/assets/images/china_title_icon.png" alt="">
      </p>
      
      <p class="my-header-new-right flex all-c">
        <el-dropdown trigger="click" @command="handleCommand" >
          <a href="javascript:void(0)">
            <span class="pull-left"><img class="my-user-logo" src="@/assets/images/v2-bg-user.svg" alt=""></span>
            <span class="pull-left my-user-name text-bluegray">
              {{$store.state.userInfo ? $store.state.userInfo.username : '用户名'}}
              <i class="el-icon-caret-bottom"></i>
            </span>
          </a>
          
          <el-dropdown-menu slot="dropdown">
            
            <el-dropdown-item command="regist" v-show="!hasLogin" ><router-link to="/regist">注册账号</router-link></el-dropdown-item>
            <el-dropdown-item command="edit" v-show="!hasLogin" ><router-link to="/login">登录</router-link></el-dropdown-item>
            <el-dropdown-item command="out" v-show="hasLogin" ><el-link>退出登录</el-link></el-dropdown-item>
            <el-dropdown-item command="editpassd" v-show="hasLogin" ><router-link to="/home/edituser">修改密码</router-link></el-dropdown-item>
            <el-dropdown-item command="editpassd" v-show="manager" ><router-link to="/home/useradm">用户管理</router-link></el-dropdown-item>
            <el-dropdown-item command="editpassd" v-show="manager" ><router-link to="/home/tckedit">创建商品</router-link></el-dropdown-item>
            <el-dropdown-item command="editpassd" v-show="manager" ><router-link to="/home/admintick">票务管理</router-link></el-dropdown-item>
            <el-dropdown-item command="editpassd" v-show="manager" ><router-link to="/home/refund">售后管理</router-link></el-dropdown-item>
            <el-dropdown-item command="edit" v-show="hasLogin" ><router-link to="/blog/orderlist">我的订单</router-link></el-dropdown-item>
            <el-dropdown-item command="edit" v-show="hasLogin" ><router-link to="/blog/ticklove">我的收藏</router-link></el-dropdown-item>
            <el-dropdown-item command="edit" v-show="hasLogin" ><router-link to="/blog/address">购票人信息修改</router-link></el-dropdown-item>
            
          </el-dropdown-menu>
        </el-dropdown>
      </p>
    </header>

  </div>
</template>

<script>
export default {
  name: 'HeaderNav',
  data() {
    return {
       user: {
        username: "",
        avatar:
          "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
          id:"",
      },
      manager:false,
      hasLogin:false,
      loading: false,
      fileList: [],
      interval: null,
      bShowPwdModifyDialog: false
    };
  },
  computed: {
  },
  
  beforeDestroy() {
    // p
  },
  methods: {
    changeActive($event){//及时判断条件
     if(this.$store.getters.getUser.id==1){ this.manager=true ;console.log('*************************')}else{this.manager=false ;console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx')}
      if(this.$store.getters.getUser.username) {
        this.user.username = this.$store.getters.getUser.username
        this.user.avatar = this.$store.getters.getUser.avatar
        this.user.id=this.$store.getters.getUser.id
        this.hasLogin = true
        
      }else{
        this.hasLogin = false
      }
    },
    
     handleCommand(command) {
        //this.$message('click on item ' + command);
        
        if(command=='out'){
            console.log('out')
            const _this = this
          _this.$axios.get("/logout",{
              headers:{
                  "Authorization":localStorage.getItem("token")
              }
          }).then(res=>{
              _this.$store.commit("REMOVE_USERINFO")
              this.hasLogin = false
              _this.$router.push("/home")
          })
        }
          
      
      }
    // p
  },created(){
      if(this.$store.getters.getUser.username) {
        this.user.username = this.$store.getters.getUser.username
        this.user.avatar = this.$store.getters.getUser.avatar
        this.hasLogin = true
        
      }else{
        this.hasLogin = false
      }
      // console.log("*****************************************")
      console.log(this.$store.getters.getUser.id)
      console.log(this.$store.getters.getUser.username)


  }
  
};
</script>

<style>
.downTitle {
  border-bottom: 1px solid #dddee1;
  height: 40px;
  line-height: 40px;
}
.downTitle span {
  border-bottom: 2px solid #1c96ff;
  font-weight: bold;
  color: #1c96ff;
  display: inline-block;
  line-height: 40px;
  padding: 0 10px;
}
.downList {
  max-height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
}
.downList li {
  padding: 12px 24px;
  border-bottom: 1px solid #e3e8ee;
}
.downList li i {
  display: inline-block;
}
.downFooter {
  border-top: 1px solid #e3e8ee;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
  display: flex;
}
.downFooter span {
  flex: 1;
}
.downFooterLeftSpan {
  border-right: 1px solid #e3e8ee;
}
.notFound {
  text-align: center;
  padding: 73px 0 88px 0;
  color: gray;
}
.my-new-logo {
  height: 60px;
}
.my-new-logo img {
  display: inline-block;
  width: auto;
  height: 40px;
}
</style>

